<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>树形结构Neo4j查询API演示</title>
    <style>
        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            max-width: 1200px;
            margin: 0 auto;
            padding: 20px;
            background-color: #f5f5f5;
        }
        .container {
            background: white;
            border-radius: 10px;
            padding: 30px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        }
        h1 {
            color: #333;
            text-align: center;
            margin-bottom: 30px;
        }
        .search-box {
            display: flex;
            gap: 10px;
            margin-bottom: 20px;
        }
        input[type="text"] {
            flex: 1;
            padding: 12px;
            border: 2px solid #ddd;
            border-radius: 5px;
            font-size: 16px;
        }
        button {
            padding: 12px 24px;
            background: #007bff;
            color: white;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            font-size: 16px;
        }
        button:hover {
            background: #0056b3;
        }
        button:disabled {
            background: #ccc;
            cursor: not-allowed;
        }
        .status {
            padding: 10px;
            margin: 10px 0;
            border-radius: 5px;
            font-weight: bold;
        }
        .status.success {
            background: #d4edda;
            color: #155724;
            border: 1px solid #c3e6cb;
        }
        .status.error {
            background: #f8d7da;
            color: #721c24;
            border: 1px solid #f5c6cb;
        }
        .status.loading {
            background: #d1ecf1;
            color: #0c5460;
            border: 1px solid #bee5eb;
        }
        .results {
            margin-top: 20px;
        }
        .node-result {
            background: #f8f9fa;
            border: 1px solid #dee2e6;
            border-radius: 5px;
            padding: 15px;
            margin: 10px 0;
        }
        .chain-result {
            background: #f8f9fa;
            border: 1px solid #dee2e6;
            border-radius: 5px;
            padding: 15px;
            margin: 10px 0;
        }
        .chain-step {
            padding: 8px 0;
            border-left: 3px solid #ddd;
            padding-left: 15px;
            margin: 5px 0;
        }
        .chain-step.matched {
            border-left-color: #007bff;
            background: #e7f3ff;
        }
        .chain-step.leaf {
            border-left-color: #28a745;
            background: #e8f5e8;
        }
        .meta-info {
            font-size: 12px;
            color: #666;
            margin-top: 10px;
        }
        .examples {
            margin: 20px 0;
            padding: 15px;
            background: #e9ecef;
            border-radius: 5px;
        }
        .examples h3 {
            margin-top: 0;
            color: #495057;
        }
        .example-query {
            display: inline-block;
            background: #007bff;
            color: white;
            padding: 5px 10px;
            margin: 3px;
            border-radius: 3px;
            cursor: pointer;
            font-size: 14px;
        }
        .example-query:hover {
            background: #0056b3;
        }
        .stats {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 15px;
            margin: 20px 0;
        }
        .stat-card {
            background: #f8f9fa;
            padding: 15px;
            border-radius: 5px;
            text-align: center;
            border: 1px solid #dee2e6;
        }
        .stat-number {
            font-size: 24px;
            font-weight: bold;
            color: #007bff;
        }
        .stat-label {
            color: #666;
            font-size: 14px;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>🌳 树形结构Neo4j查询API演示</h1>
        
        <div class="stats" id="stats">
            <!-- 统计信息将在这里显示 -->
        </div>
        
        <div class="search-box">
            <input type="text" id="queryInput" placeholder="输入查询内容，例如：E301凝固效果差" />
            <button onclick="search()" id="searchBtn">🔍 查询</button>
        </div>
        
        <div class="examples">
            <h3>💡 查询示例</h3>
            <span class="example-query" onclick="setQuery('E301凝固效果差')">E301凝固效果差</span>
            <span class="example-query" onclick="setQuery('E301 APS保存')">E301 APS保存</span>
            <span class="example-query" onclick="setQuery('TD504投入量')">TD504投入量</span>
            <span class="example-query" onclick="setQuery('PK511扩增循环数')">PK511扩增循环数</span>
            <span class="example-query" onclick="setQuery('温度设置')">温度设置</span>
        </div>
        
        <div id="status"></div>
        <div id="results" class="results"></div>
    </div>

    <script>
        const API_BASE = 'http://localhost:8000';
        
        // 页面加载时获取统计信息
        window.onload = function() {
            loadStats();
        };
        
        // 加载统计信息
        async function loadStats() {
            try {
                const response = await fetch(`${API_BASE}/stats`);
                const data = await response.json();
                
                if (data.success) {
                    const stats = data.statistics;
                    document.getElementById('stats').innerHTML = `
                        <div class="stat-card">
                            <div class="stat-number">${stats.products}</div>
                            <div class="stat-label">产品数量</div>
                        </div>
                        <div class="stat-card">
                            <div class="stat-number">${stats.tree_nodes}</div>
                            <div class="stat-label">决策节点</div>
                        </div>
                        <div class="stat-card">
                            <div class="stat-number">${stats.leaf_nodes}</div>
                            <div class="stat-label">解决方案</div>
                        </div>
                        <div class="stat-card">
                            <div class="stat-number">${stats.total_nodes}</div>
                            <div class="stat-label">总节点数</div>
                        </div>
                    `;
                }
            } catch (error) {
                console.error('加载统计信息失败:', error);
            }
        }
        
        // 设置查询内容
        function setQuery(query) {
            document.getElementById('queryInput').value = query;
        }
        
        // 执行查询
        async function search() {
            const query = document.getElementById('queryInput').value.trim();
            if (!query) {
                showStatus('请输入查询内容', 'error');
                return;
            }
            
            const searchBtn = document.getElementById('searchBtn');
            const resultsDiv = document.getElementById('results');
            
            // 显示加载状态
            searchBtn.disabled = true;
            searchBtn.textContent = '🔄 查询中...';
            showStatus('正在查询...', 'loading');
            resultsDiv.innerHTML = '';
            
            try {
                const response = await fetch(`${API_BASE}/search`, {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                    },
                    body: JSON.stringify({ query: query })
                });
                
                const data = await response.json();
                
                if (data.success) {
                    showStatus(data.message, 'success');
                    displayResults(data);
                } else {
                    showStatus(`查询失败: ${data.message}`, 'error');
                }
            } catch (error) {
                showStatus(`查询出错: ${error.message}`, 'error');
            } finally {
                searchBtn.disabled = false;
                searchBtn.textContent = '🔍 查询';
            }
        }
        
        // 显示状态信息
        function showStatus(message, type) {
            const statusDiv = document.getElementById('status');
            statusDiv.innerHTML = `<div class="status ${type}">${message}</div>`;
        }
        
        // 显示查询结果
        function displayResults(data) {
            const resultsDiv = document.getElementById('results');
            
            if (data.result_type === 'nodes') {
                // 显示节点结果
                let html = '<h3>📋 匹配的节点</h3>';
                data.nodes.forEach((node, index) => {
                    html += `
                        <div class="node-result">
                            <strong>${index + 1}. [${node.product_code}] ${node.content}</strong>
                            <div class="meta-info">
                                相关性: ${node.relevance_score.toFixed(2)} | 
                                来源: ${node.filename}:${node.line_number} | 
                                类型: ${node.node_type}
                            </div>
                        </div>
                    `;
                });
                resultsDiv.innerHTML = html;
            } else if (data.result_type === 'chains') {
                // 显示链路结果
                let html = '<h3>🔗 决策链路</h3>';
                data.chains.forEach((chain, index) => {
                    html += `
                        <div class="chain-result">
                            <h4>链路 ${index + 1} (产品: ${chain.product_code})</h4>
                            <div class="meta-info">来源: ${chain.filename}:${chain.line_number}</div>
                    `;
                    
                    chain.chain.forEach(step => {
                        const stepClass = step.is_matched ? 'matched' : (step.node_type === 'LeafNode' ? 'leaf' : '');
                        const icon = step.is_matched ? '🔍' : (step.node_type === 'LeafNode' ? '🎯' : '📍');
                        html += `
                            <div class="chain-step ${stepClass}">
                                ${icon} ${step.content}
                            </div>
                        `;
                    });
                    
                    html += '</div>';
                });
                resultsDiv.innerHTML = html;
            }
        }
        
        // 支持回车键查询
        document.getElementById('queryInput').addEventListener('keypress', function(e) {
            if (e.key === 'Enter') {
                search();
            }
        });
    </script>
</body>
</html>
